<template>
  <div>
    <!-- 17.所有页面添加骨架屏优化用户体验 -->
    <van-skeleton title :row="3" :loading="loading">
      <!-- 6.实现首页搜索框自适应布局 -->
      <!-- 10.使用搜索组件，并实现首页搜索框向下滑动吸顶效果 -->
      <van-sticky>
        <div class="icon">
          <!-- 5.正确使用字体图标进行排版 -->
          <i class="iconfont icon-dizhi">碧桂园凤凰城</i>
          <van-search
            v-model="value"
            shape="round"
            background="#4fc08d"
            placeholder="请输入搜索关键词"
            @search="search"
          />
        </div>
      </van-sticky>
      <!-- 7.使用弹性盒布局进行首页分类板块轮播图区域页面排版 -->
      <!-- 8.实现首页分类板块鼠标滑动切换效果 -->
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="#39a9ed">
        <van-swipe-item>
          <div>
            <van-grid :column-num="5" :border="false">
              <van-grid-item v-for="value in gridList" :key="value">
                <img class="gridimg" :src="value.img" alt="" />
                <span>{{ value.title }}</span>
              </van-grid-item>
            </van-grid>
          </div>
        </van-swipe-item>

        <van-swipe-item>
          <div>
            <van-grid :column-num="5" :border="false">
              <van-grid-item v-for="value in gridList" :key="value">
                <img class="gridimg" :src="value.img" alt="" />
                <span>{{ value.title }}</span>
              </van-grid-item>
            </van-grid>
          </div>
        </van-swipe-item>
      </van-swipe>

      <van-nav-bar
        right-text="更多>"
        left-arrow
        @click-right="onClickRight"
        :border="false"
      >
        <template #left>
          <span>一公里商家</span>
        </template>
      </van-nav-bar>

      <van-grid :border="false">
        <van-grid-item icon="photo-o" text="商品1" />
        <van-grid-item icon="photo-o" text="商品2" />
        <van-grid-item icon="photo-o" text="商品3" />
        <van-grid-item icon="photo-o" text="商品4" />
      </van-grid>
      <!-- 12.实现首页商品列表下拉刷新，触底加载下一页 -->
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
          v-model:loading="loading1"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <van-tabs v-model:active="active">
            <van-tab title="好物推荐">
              <van-grid :column-num="2">
                <van-grid-item v-for="item in list1" :key="item.id">
                  <!-- 11.实现首页商品列表的正确布局，图片做懒加载处理 -->
                  <img class="lazy" v-lazy="item.src" alt="" />
                  <span>{{ item.title }}</span>
                </van-grid-item>
              </van-grid>
            </van-tab>
            <van-tab title="新品尝鲜">
              <van-grid :column-num="2">
                <van-grid-item v-for="item in list1" :key="item.id">
                  <img class="lazy" v-lazy="item.src" alt="" />
                  <span>{{ item.title }}</span>
                </van-grid-item>
              </van-grid>
            </van-tab>
            <van-tab title="优惠折扣">优惠折扣</van-tab>
            <van-tab title="猜你喜欢">猜你喜欢</van-tab>
          </van-tabs>
        </van-list>
      </van-pull-refresh>

      <footer>
        <TabBar :index="0" />
      </footer>
    </van-skeleton>
  </div>
</template>
<script setup>
import TabBar from "@/components/TabBar.vue";
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import Search from "@/components/Search.vue";
import "lodash";
import img1 from "@/assets/image/1.png";
import img2 from "@/assets/image/2.png";
import img3 from "@/assets/image/3.png";
import img4 from "@/assets/image/4.png";
import img5 from "@/assets/image/5.png";
import img6 from "@/assets/image/6.png";
import img7 from "@/assets/image/7.png";
import img8 from "@/assets/image/8.png";

const router = useRouter();

const active = ref(0);
const gridList = [
  {
    img: img1,
    title: "蔬菜豆品",
  },
  {
    img: img2,
    title: "蔬菜豆品",
  },
  {
    img: img3,
    title: "蔬菜豆品",
  },
  {
    img: img4,
    title: "蔬菜豆品",
  },
  {
    img: img5,
    title: "蔬菜豆品",
  },
  {
    img: img6,
    title: "蔬菜豆品",
  },
  {
    img: img7,
    title: "蔬菜豆品",
  },
  {
    img: img8,
    title: "蔬菜豆品",
  },
  {
    img: img1,
    title: "蔬菜豆品",
  },
  {
    img: img1,
    title: "蔬菜豆品",
  },
];

const onClickRight = () => {
  router.push("/shang");
};

const loading = ref(true);

onMounted(() => {
  loading.value = false;
});

const value = ref("");
// const search = () =>{
//     console.log(11);
// }

// 9.封装搜索组件，并做防抖处理
const search = _.debounce(() => {
  console.log(11);
}, 1000);

const list1 = [
  {
    src: "https://img0.baidu.com/it/u=2955332398,1712446780&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1718989200&t=500f1fdc0411ce9c603dd75c0cbb3448",
    title: "商品1",
  },
  {
    src: "https://img2.baidu.com/it/u=4206823861,2043582464&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1718989200&t=46c9d4370c0cd056632024160d7a1cab",
    title: "商品2",
  },
  {
    src: "https://img0.baidu.com/it/u=1128422789,3129806361&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1718989200&t=19af51f6994a90270ea04dfea0e238db",
    title: "商品3",
  },
  {
    src: "https://ts3.cn.mm.bing.net/th?id=OIP-C.uMf5AX3a6yYpIhpEkyDxiQAAAA&w=250&h=250&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2",
    title: "商品4",
  },
  {
    src: "https://tse4-mm.cn.bing.net/th/id/OIP-C.N0USLldg_iKDGVKT12vB4AHaEK?w=280&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7",
    title: "商品5",
  },
  {
    src: "https://tse2-mm.cn.bing.net/th/id/OIP-C.c4XJC3rxD525vJOR1KLnGwHaE7?w=265&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7",
    title: "商品6",
  },
  {
    src: "https://tse3-mm.cn.bing.net/th/id/OIP-C.uMf5AX3a6yYpIhpEkyDxiQAAAA?w=211&h=211&c=7&r=0&o=5&dpr=1.3&pid=1.7",
    title: "商品7",
  },
  {
    src: "https://tse3-mm.cn.bing.net/th/id/OIP-C.3xmKNn35CQD3ghw9_ghYOwAAAA?w=174&h=191&c=7&r=0&o=5&dpr=1.3&pid=1.7",
    title: "商品8",
  },
  {
    src: "https://img0.baidu.com/it/u=2955332398,1712446780&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1718989200&t=500f1fdc0411ce9c603dd75c0cbb3448",
    title: "商品9",
  },
  {
    src: "https://img0.baidu.com/it/u=2955332398,1712446780&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1718989200&t=500f1fdc0411ce9c603dd75c0cbb3448",
    title: "商品10",
  },
];
const list = ref([]);
const loading1 = ref(false);
const finished = ref(false);
const refreshing = ref(false);

const onLoad = () => {
  setTimeout(() => {
    if (refreshing.value) {
      list.value = [];
      refreshing.value = false;
    }

    for (let i = 0; i < 10; i++) {
      list.value.push(list.value.length + 1);
    }
    loading.value = false;

    if (list.value.length >= 10) {
      finished.value = true;
    }
  }, 1000);
};

const onRefresh = () => {
  // 清空列表数据
  finished.value = false;

  // 重新加载数据
  // 将 loading 设置为 true，表示处于加载状态
  loading.value = true;
  onLoad();
};
</script>
<style lang="scss" scoped>
// 3.正确使用sass进行样式布局,使用变量、嵌套规则以及封装mixin函数进行布局
$ff: 1;

@import "../assets/sass/index.scss";

@mixin ww {
  width: 100vw;
}

.van-swipe {
  div {
    @include ww;
    display: flex;
    .gridimg {
      width: 40px;
      flex: $ff;
    }
    span {
      font-size: 14px;
      flex: $ff;
    }
  }
}
footer {
  height: 46px;
}
.lazy {
  width: 90px;
  height: 120px;
}
</style>